<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-menu"></i>{{$route.name}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div>
            <el-table :data="cars">
                <el-table-column prop="carName" label="车型"></el-table-column>
                <el-table-column prop="carPrice" label="车价"></el-table-column>
                <el-table-column prop="color" label="颜色"></el-table-column>
                <el-table-column prop="carSell" label="在售" :formatter="sell"></el-table-column>
                <el-table-column fixed="right" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button @click="del(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination @current-change="handleCurrentChange" :current-page="num" layout="total,  prev, pager, next, jumper" :total="totalElement">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { getCars, delCar } from '../../api/server.js'
export default {
    data() {
        return {
            cars: [],
            num: 1,
            totalElement: 0
        }
    },
    created() {
    },
    methods: {
        handleCurrentChange(val) {
            this.getCar(val)
        },
        getCar(index) {
            let obj = { index: index, size: 10 }
            getCars(obj).then(res => {
                this.cars = res.result.records
                this.totalElement = res.result.total
            })
        },
        sell(val) {
            if (val == 1) {
                return '售出'
            } else {
                return '在售'
            }
        },
        del(id) {
            let obj = {
                id: id

            }
            delCar(obj).then(res => {
                this.$message.success('删除成功')
                this.getCar(0)
            })
        }
    },
    mounted() {
        this.getCar(0)
    }
}
</script>
<style lang="scss" scoped>
.handle-box {
  margin-bottom: 1%;
  .search {
    width: 30%;
  }
}

.block {
  text-align: center;
  margin-top: 1%;
}
</style>